<template>
  <div class="activity-detail">
    <button @click="goBack" class="back-btn">返回</button>
    <h1>{{ activity.title }}</h1>
    <div class="detail-content">
      <p><strong>日期:</strong> {{ activity.date }}</p>
      <p><strong>地点:</strong> {{ activity.location }}</p>
      <p><strong>活动描述:</strong></p>
      <p>{{ activity.description }}</p>
    </div>
  </div>
</template>

<script>
import activities from '../data/activities'

export default {
  name: 'ActivityDetail',
  props: ['id'],
  computed: {
    activity() {
      return activities.find(a => a.id === parseInt(this.id))
    }
  },
  methods: {
    goBack() {
      this.$router.go(-1)
    }
  }
}
</script>
